import React from 'react';
import './notice.less';

class Notice extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'Notice';
        this.state = {
            title:"",
            noBtn:"取消",
            yesBtn:"确定",
            data:[]
        }
    }
    onOK(){/*获取外部confirm方法*/}
    onCancel(){/*获取外部cancel方法*/}
    handleCancel(){
        this.setState({
            visible:false
        })
        this.onCancel()
    }
    handleConfirm(){
        //this.props.handleConfirm()
        this.setState({
            visible:false
        })
        this.onOK()
    }
    show(obj){
        this.setState({
            visible:true,
            title:obj.title,
            data:obj.data
        })
        this.onCancel=obj.cancel
        this.onOK=obj.confirm
    }
    close(){
        this.setState({
            visible:false
        })
    }
    render() {
        var height=this.props.height
        var width=this.props.width
        return this.state.visible?<div className="tederen-notice">
            <div className="modal-container" style={{
                width: width+"px",
                height: height+"px",
                marginRight: -width/2+"px"}
                }>
                <div className="modal-head">
                    <div className="modal-title">{this.props.title||this.state.title}</div>
                </div>
                <div className="modal-body">
                    <div className="modal-scroll">
                        {
                            this.state.data.map((d,i)=>{
                                return <div key={i}>
                                    <div>{d.name}{d.id}:</div>
                                    <div>{d.reason}</div>
                                </div>
                            })
                        }
                    </div>
                </div>
                <div className="modal-bottom">
                    <input className="btn-cancel" type="button" value={this.state.noBtn} onClick={this.handleCancel.bind(this)}/>
                    <input className="btn-confirm" type="button" value={this.state.yesBtn} onClick={this.handleConfirm.bind(this)}/>
                </div>
            </div>
            <div className="modal-mask"></div>
        </div>:null
    }
}

Notice.defaultProps={
    width: 600,
    // height: 500,
}

export default Notice
